<!DOCTYPE HTML>
<html>

<head>
    <title> 会员列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css"/>
</head>
<body class="dark-theme">
<div class="container">
    <div class="detail-page">
        <div class="detail-page-title">
            <h4>会员列表</h4>
        </div>
        <div class="detail-section">
            <div class="detail-row">
                <div class="jx-search-container">
                    <form id="searchForm2"
                          class="jx-form form-horizontal jx-form-thin bui-form-horizontal bui-form bui-form-field-container"
                          method="post" aria-disabled="false" action="" aria-pressed="false">
                        <input type="hidden" name="orderStatus" id="orderStatus" value="1" class="bui-form-field"
                               aria-disabled="false">
                        <div class="row ">
                            <div class="control-group span7">
                                <label class="control-label first">账号:</label>
                                <div class="controls">
                                    <input type="text" class="control-text bui-form-field" name="account"
                                           aria-disabled="false">
                                </div>
                            </div>
                            <div class="control-group span9">
                                <label class="control-label control-label-small">下单时间:</label>
                                <div class="controls">
                                    <input type="text" class="calendar "><span> - </span>
                                    <input type="text" class="calendar "><span> </span>
                                </div>
                            </div>
                            <div class="control-group span7">
                                <label class="control-label">姓名:</label>
                                <div class="controls">
                                    <input type="text" class="control-text bui-form-field" name="lxrName"
                                           aria-disabled="false" aria-pressed="false">
                                </div>
                            </div>
                            <div class="control-group span8">
                                <label class="control-label control-label-small">性别:</label>
                                <div class="controls">
                                    <select class="normal-control input-small">
                                        <option value="">男</option>
                                        <option value="">女</option>
                                    </select>
                                </div>
                            </div>

                            <div class="control-group span2 pull-right">

                                <button type="submit" class="jx-btn btn-default">搜索</button>

                            </div>
                        </div>
                        <div class="row">
                            <div class="control-group span7">
                                <label class="control-label first">手机号:</label>
                                <div class="controls">
                                    <input name="" type="text" class="control-text">
                                </div>
                            </div>
                            <div class="control-group span7">
                                <label class="control-label first">邮箱:</label>
                                <div class="controls">
                                    <input name="" type="text" class="control-text">
                                </div>
                            </div>


                        </div>
                    </form>
                </div>
                <div>
                    <div id="grid"></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <!-- 表格 start-->
            <!--   <div id="grid"></div> -->
            <!-- 表格 end-->
        </div>
    </div>
</div>
</div>
<script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
<script type="text/javascript" src="../../../assets/js/config-min.js"></script>
<script type="text/javascript">
    BUI.use('common/page');
</script>
<!-- script start -->
<script>

    /* 在服务器端可以使用*/
    $('#user-add-btn').click(function (e) {

        top.topManager.openPage({
            id: 'user-add',
            href: 'templates/user/user-list/user-add.html',
            title: '添加品牌'
        });

    });

    BUI.use(['bui/grid', 'bui/data', 'bui/calendar', 'common/search'], function (Grid, Data, Calendar, Search) {
        var Grid = Grid,
            Store = Data.Store,
            columns = [{
                title: '帐户ID',
                dataIndex: 'o',
                elCls: 'center', //居中
                width: 100
            }, {
                title: '绑定手机号',
                dataIndex: 'a',
                elCls: 'center', //居中
                width: 100
            }, {
                title: '绑定邮箱 ',
                elCls: 'center',
                dataIndex: 'b',
                width: 150
            }, {
                title: '姓名',
                elCls: 'center',
                dataIndex: 'c',
                width: 100
            }, {
                title: '性别',
                elCls: 'center',
                dataIndex: 'd',
                width: 100
            }, {
                title: '注册时间',
                elCls: 'center',
                dataIndex: 'e',
                width: 150
            }, {
                title: '使用状态',
                dataIndex: 'f',
                elCls: 'center',
                width: 100
            }, {
                title: '开店数量',
                dataIndex: 'g',
                elCls: 'center',
                width: 100
            }, {
                title: '操作',
                dataIndex: 'h',
                elCls: 'center',
                width: 200,
                renderer: function (value, obj) {
                    return '<span class="grid-command btn-off-sale">[ 冻结 ]</span>'; //页面操作不需要使用Search.createLink
                }
            }],
            data = [{
                o: '1222',
                a: '15900684377',
                b: 'tinsin@groupjx.com',
                c: '陈晨',
                d: '男',
                e: '2016-02-13 19:00:00',
                f: '正常',
                g: '0'
            }];
        var datepicker = new Calendar.DatePicker({
            trigger: '.calendar',
            autoRender: true
        });
        var store = new Store({ //初始化数据
                data: data,
                pageSize: 2 // 配置分页数目
            }),
            grid = new Grid.Grid({
                render: '#grid',
                elCls: 'small-bui-grid-table',
                columns: columns,
                forceFit: true,
                bbar: {
                    // pagingBar:表明包含分页栏
                    pagingBar: true
                },
                store: store
            });
        //点击操作
        grid.on('itemclick', function (ev) {
            var sender = $(ev.domTarget),
                itemEl = $(ev.element),
                item = ev.item;

            if (sender.hasClass('btn-off-sale')) { //点击下架操作
                freezeFunction(item, itemEl);

            }
        });

        //冻结会员
        function freezeFunction(item, itemEl) {
            BUI.Message.Confirm('确认冻结该会员吗？', function () {

            }, 'question');
        }

        grid.render();
    });
</script>
<!-- script end -->

<body>

</html>
